<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">box1</div>
		<div class="box">box2</div>

		<div id="nav">
			<ol>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ol>
		</div>
	</body>

	<script>
		// 类选择器是HTML5新增的
		var timmer = document.getElementsByClassName("box");
		// 返回的是元素对象
		// console.log(timmer);
		
		// querySelector 也是HTML5新增的
		// document.querySelector("选择器") 可以传所有的选择器类型,返回第一个元素对象
		var firstbox = document.querySelector(".box");
		console.log(firstbox);
		var nav = document.querySelector("#nav");
		console.log(nav);
		var firstLi = document.querySelector("li");
		console.log(firstLi);
		
		 // document.querySelectorAll 获取所有元素对象
		var allLi = document.querySelectorAll("li");
		console.log(allLi);
	</script>
</html>
